<template>
  <div class="container dark-theme">
    <!-- 头部导航栏 -->
    <div class="header">
      <div class="logo">“沈誉通”信用生活综合系统</div>
      <div class="nav">
        <!-- <router-link to="/home">首页</router-link> -->
        <router-link to="/credit-life">信用生活</router-link>
        <router-link to="/credit-business">信用商业</router-link>
        <router-link to="/behavior">亲社会行为</router-link>
        <router-link to="/news">新闻资讯</router-link>
        <router-link to="/credit-management">信用管理</router-link>
      </div>
      <div class="user-menu" ref="userMenu">
        <div class="notification">
          <router-link to="/notice">
            <i class="el-icon-message"></i>
          </router-link>
        </div>
        <div class="avatar-box">
          <img :src="user.icon" class="avatar" alt="用户头像" @click.stop="toggleMenu" />
        </div>
        <div v-if="isMenuOpen" class="dropdown-menu">
          <div class="menu-item" @click="goToProfile">个人信息</div>
          <div class="menu-item" @click="logout">退出登录</div>
        </div>
      </div>
    </div>

    <!-- 分隔线 -->
    <div class="divider"></div>

    <!-- 组织者展示 -->
    <div class="section organizers-section">
      <div class="section-header">
        <h2 class="section-title">精选组织者</h2>
      </div>
      <div class="organizer-grid">
        <div v-for="organizer in organizers" :key="organizer.id" class="organizer-card"
          @click="goToOrganizer(organizer.id)">
          <div class="organizer-image">
            <img :src="organizer.images" :alt="organizer.name">
          </div>
          <div class="organizer-info">
            <h3>{{ organizer.name }}</h3>
            <p class="description">{{ organizer.description }}</p>
            <p class="contact">{{ organizer.contact }}</p>
            <p class="address">{{ organizer.address }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Message } from 'element-ui';

export default {
  name: 'Behavior',
  data() {
    return {
      user: {},
      isMenuOpen: false,
      organizers: [],
    };
  },
  created() {
    this.queryUser()
    this.queryAllOrganizer()
  },
  methods: {
    queryAllOrganizer() {
      axios.get('/commodity/organizer/list/allOrganizer', {
        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
      }).then((res) => {
        if(res.status == 200){
          this.organizers = res.data.data
        }else{
          Message('组织者请求失败')
        }
      }).catch((err) => {
        Message('组织者请求失败')
        console.log('组织者请求失败', err)
      })
    },

    queryUser() {
      axios.get('/users/user/me', {
        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
      }).then(({ data }) => {
        if (data.success && data.data) {
          this.user = data.data;
          if (this.user.icon && !this.user.icon.startsWith('http')) {
            this.user.icon = `${this.user.icon}`;
          }
          this.queryUserInfo();
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    queryUserInfo() {
      axios.get('/users/user/basic')
        .then(({ data }) => {
          this.info = data || { introduce: '' };
          sessionStorage.setItem('userInfo', JSON.stringify(data));
        })
        .catch(err => this.$message.error(err.message));
    },
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    },
    closeMenuOnClickOutside(event) {
      const menu = this.$refs.userMenu;
      if (menu && !menu.contains(event.target)) {
        this.isMenuOpen = false;
      }
    },
    goToProfile() {
      this.$router.push('/user-information');
      this.isMenuOpen = false;
    },
    logout() {
      axios.post('/users/user/logout')
        .then(() => {
          sessionStorage.removeItem('token');
          this.$router.push('/');
        })
        .catch(err => this.$message.error(err.message));
    },
    goToOrganizer(id) {
      this.$router.push(`/organizer-detail/${id}`);
    }
  }
};
</script>

<style scoped>
.container.dark-theme {
  background: radial-gradient(ellipse at center, #001e3c 0%, #000 100%);
  min-height: 100vh;
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 10px 30px;
  background: #002d52;
  align-items: center;
}

.logo {
  font-size: 20px;
  color: #4fc3f7;
}

.nav a {
  margin: 0 10px;
  color: #fff;
  text-decoration: none;
}

.nav a:hover {
  color: #4fc3f7;
}

.user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.notification {
  margin-right: 10px;
}

.notification a {
  color: #fff;
  text-decoration: none;
}

.notification i {
  font-size: 24px;
  color: #4fc3f7;
}

.notification i:hover {
  color: #2196f3;
}

.avatar-box img.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #002d52;
  border-radius: 4px;
  padding: 5px 0;
  min-width: 120px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.menu-item {
  padding: 8px 16px;
  cursor: pointer;
  color: #fff;
}

.menu-item:hover {
  background: #014b75;
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #4fc3f7, transparent);
  margin: 20px 0;
}

.section {
  padding: 20px;
}

.section-title {
  color: #4fc3f7;
  margin-bottom: 20px;
  font-size: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.organizer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  min-height: calc(100vh - 60px);
  /* 确保内容占满剩余高度 */
}

.organizer-card {
  background: rgba(0, 45, 82, 0.8);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}

.organizer-card:hover {
  transform: translateY(-5px);
}

.organizer-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.organizer-info {
  padding: 15px;
  flex: 1;
}

.organizer-info h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 18px;
}

.organizer-info .description {
  color: #e0e0e0;
  margin: 0 0 10px;
  font-size: 14px;
}

.organizer-info .contact {
  color: #b0bec5;
  margin: 0 0 10px;
  font-size: 14px;
}

.organizer-info .address {
  color: #b0bec5;
  margin: 0;
  font-size: 14px;
}
</style>
